<template>
    <el-card>
        <el-page-header title="新闻管理" content="新闻列表" icon="" />
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column label="分类">
                <template #default="scope">
                    {{ categoryFormat(scope.row.category) }}
                </template>
            </el-table-column>
            <el-table-column label="更新时间">
                <template #default="scope">
                    {{ formatTime.getTime(scope.row.editTime) }}
                </template>
            </el-table-column>
            <el-table-column label="是否发布">
                <template #default="scope">
                    <el-switch @change="handleSwitchChange(scope.row)" v-model="scope.row.isPublish" :active-value="1" :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button circle :icon="Star" type="success" @click="handlePreview(scope.row)"></el-button>
                    <el-button circle :icon="Edit" type="warning" @click="handleEdit(scope.row)"></el-button>
                    <el-popconfirm @confirm="handleDelete(scope.row)" title="确定删除此新闻吗？" confirm-button-text="确定" cancel-button-text="取消">
                        <template #reference>
                            <el-button circle :icon="Delete" type="danger"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" title="预览新闻" width="50%">
        <div>
            <h2>{{ previewData.title }}</h2>
            <div style="font-size: 12px;color:gray;">
                {{ formatTime.getTime(previewData.editTime) }}
            </div>
            <el-divider><el-icon><star-filled /></el-icon></el-divider>
            <div v-html="previewData.content" class="htmlcontent"></div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';
import { Star, Edit, Delete,StarFilled } from '@element-plus/icons-vue'
import { useStore } from 'vuex';
import formatTime from '../../util/formatTime'
import axios from 'axios'
const tableData = ref([])
const router = useRouter()
const store = useStore()
onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get('/adminapi/news/list')
    // console.log(res.data.data)
    // console.log(store.state.userInfo.username)
    if(store.state.userInfo.role===1){
        tableData.value = res.data.data
    }else{
        for(var item in res.data.data){
            if(res.data.data[item].author===store.state.userInfo.username){
                // console.log(res.data.data[item]);
                tableData.value.push(res.data.data[item])
            }
        }
    }
}

const categoryFormat = (category) => {
    const arr = ['最新动态', '典型案例', '停止公告']
    return arr[category - 1]
}
const handleDelete = async (data) => {
    const res = await axios.delete(`/adminapi/news/list/${data._id}`)
    if(res.data.ActionType === "OK"){
        ElMessage.success("删除新闻成功")
        getTableData()
    }
}

const handleEdit = (data) => {
    // console.log(data)
    router.push(`/news-manage/newsedit/${data._id}`)
}

const handleSwitchChange = async (data) => {
    await axios.put('/adminapi/news/publish', {_id:data._id, isPublish: data.isPublish})
    getTableData()
}

// 预览
const previewData = ref({})
const dialogVisible = ref(false)
const handlePreview = (data) => {
    previewData.value = data
    dialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.el-table {
    margin-top: 50px;
}
::v-deep .htmlcontent {
    white-space: pre-wrap;
    word-wrap: break-word;
    img{
        width: 100%;
    }
}
</style>